<template>
  <!-- :data="
      tableData.filter(
        (data) =>
          !search || data.name.toLowerCase().includes(search.toLowerCase())
      )
    " -->
  <el-card class="box-card" shadow="always">
    <div slot="header" class="clearfix">
      <span style="font-size:30px;">英雄列表</span>
      <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
    </div>
    
    <template>
      <el-radio-group v-model="radio" @change="radioChangeHandle">
        <el-radio :label="0">全部</el-radio>
        <el-radio :label="1">战士</el-radio>
        <el-radio :label="2">法师</el-radio>
        <el-radio :label="3">坦克</el-radio>
        <el-radio :label="4">刺客</el-radio>
        <el-radio :label="5">射手</el-radio>
        <el-radio :label="6">辅助</el-radio>
      </el-radio-group>
      <hr />
    </template>

<!--     
    <el-input 
          v-model="searchContent" 
          clearable
          placeholder="请输入内容" 
          ></el-input> -->

    <el-table ref="filterTable" :data="filterTableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)" :row-class-name="tableRowClassName" style="width: 100%">
      <el-table-column prop="date" label="头像" width="120">
        <template slot-scope="scope">
          <el-avatar :size="60">
            <img v-bind:src="
              'https://game.gtimg.cn/images/yxzj/img201606/heroimg/' +
              scope.row.ename +
              '/' +
              scope.row.ename +
              '.jpg  '
            " />
          </el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="ename" label="英雄编号" width="120"> </el-table-column>
      <el-table-column prop="cname" label="英雄名称" width="120"></el-table-column>
      <el-table-column prop="title" label="英雄称号" width="120"></el-table-column>
      <el-table-column label="英雄类型" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.hero_type == 1">
            <el-tag effect="light" type="danger">战士</el-tag>
          </span>
          <span v-if="scope.row.hero_type == 2">
            <el-tag effect="dark" type="">法师</el-tag>
          </span>
          <span v-if="scope.row.hero_type == 3">
            <el-tag effect="light" type="warning">坦克</el-tag>
          </span>
          <span v-if="scope.row.hero_type == 4">
            <el-tag effect="dark" type="danger">刺客</el-tag>
          </span>
          <span v-if="scope.row.hero_type == 5">
            <el-tag effect="light" type="success">射手</el-tag>
          </span>
          <span v-if="scope.row.hero_type == 6">
            <el-tag effect="light" type="info">辅助</el-tag>
          </span>
        </template>

      </el-table-column>
      <el-table-column prop="skin_name" label="皮肤名称" width="300"></el-table-column>
      <el-table-column align="right">
        <template #header>
          <el-input 
          v-model="searchContent" 
          clearable
          placeholder="请输入内容" 
          ></el-input>
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-popconfirm @confirm="handleDelete(scope.$index, scope.row)" confirm-button-text="确定"
            cancel-button-text="再想想" icon="el-icon-info" icon-color="red" title="确定删除这行内容吗？">
            <el-button slot="reference" size="mini" type="primary">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange"
      @size-change="handleSizeChange" :page-count="pageCount" :page-size="pageSize" prev-text="上一页" next-text="下一页"
      :current-page="currentPage">
    </el-pagination>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      tableTypeData: [],
      searchContent: '',
      currentPage: 1,
      pageSize: 5,
      pageCount: 1,
      radio: 0
    };
  },
  created() {
    this.query();
  },
  computed: {
    //过滤数据 实现分页和搜索效果
    filterTableData:function() {
      let input = this.searchContent && this.searchContent.toLowerCase();
      let searchItems;
      //搜索 且有结果就返回一个结果数组
      if (input) {
        searchItems = this.tableData.filter(function(item) {
          return Object.keys(item).some(function(key1) {
            return String(item[key1])
              .toLowerCase()
              .match(input);
          });
        });
      } else {
        //不搜索 则返回tableTypeData,即对应类型的英雄列表
        searchItems = this.tableTypeData;
      }
      return searchItems;
    }
  },
  methods: {
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 0) {
        return "warning-row";
      } else if (rowIndex % 2 === 1) {
        return "success-row";
      }
      return "";
    },
    query() {
      fetch("http://47.241.102.141:3000/heros")
        .then((response) => response.json())
        .then((data) => {
          this.tableData = data;
          this.tableTypeData = this.tableData;
          this.pageCount = Math.ceil(this.tableData.length / this.pageSize);
          // console.log(data);
        });
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
      for (let i = 0; i < this.tableTypeData.length; i++) {
        if (this.tableTypeData[i].ename == row.ename) {
          this.tableTypeData.splice(i, 1);
          break;
        }
      }
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
    handleSizeChange(pageSize) {
      this.currentPage = 1;
      this.pageSize = pageSize;
    },
    commonContent(radioNum) {
      this.currentPage = 1;
      if(radioNum === 0) {
        this.tableTypeData = this.tableData;
      } else {
        this.tableTypeData = [];
          for (let i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].hero_type == radioNum) {
              this.tableTypeData.push(this.tableData[i]);
            }
          }
      }
      this.pageCount = Math.ceil(this.tableTypeData.length / this.pageSize);
    },
    //如果单选框发生改变 就显示相应类型的英雄
    radioChangeHandle() {
      switch (this.radio) {
        case 0:
          this.commonContent(0);
          break;
        case 1:
          this.commonContent(1);
          break;
        case 2:
          this.commonContent(2);
          break;
        case 3:
          this.commonContent(3);
          break;
        case 4:
          this.commonContent(4);
          break;
        case 5:
          this.commonContent(5);
          break;
        case 6:
          this.commonContent(6);
          break;
      }
    }

  },
};
</script>



<style>
.el-table .warning-row {
  background-color: white;
}

.el-table .success-row {
  background: #f0f9eb;
}

.el-table {
  width: 100%;
  margin: 0 auto;
}
</style>